<template>
  <div class="shoplist">
    <ul>
		<li v-for="item in shoplist" key="item.id">
			<img :src="item.src" alt="">
			<div>
				<p>{{ item.title }}</p>
				<p class="price">{{ item.price }}</p>
				<p><button @click="add(item)">加入购物车</button></p>
			</div>
		</li>
	</ul>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

import {mapState} from 'vuex'

export default {
  name:'shoplist',
  
  //每个计算属性都要写个方法太麻烦了，vuex提供了一个辅助函数mapState简化代码
  computed:mapState(['shoplist']),
  
  methods:{
	  add(item){
		  //通过提交一个mutation来改变购物车的属性
		  this.$store.commit('add',item);
	  }
  }
  
  
  // computed:{			//shoplist的数据是放在store里面进行集中管理，可以在组件里面直接通过computed直接获取
	 //  shoplist(){
		//   return this.$store.state.shoplist;
	 //  }
  // },
  
  
  // data(){
	 //  return{
		//   shoplist:[
		// 	  {'id':1,'title':'樱岛麻衣','price':999.9,src:"../../public/cjn_wife(2).jpeg"},
		// 	  {id:2,'title':'樱岛麻衣','price':999.9,src:'../../public/cjn_wife(2).jpeg'},
		// 	  {id:3,'title':'樱岛麻衣','price':999.9,src:'../../public/cjn_wife(2).jpeg'},
		// 	  {id:4,'title':'樱岛麻衣','price':999.9,src:'../../public/cjn_wife(2).jpeg'}
		//   ]
	 //  }
  // }
  
}
</script>

<style scoped>
	img{
		width: 100px;
		border: 1px solid #ccc;
		margin: 10px 10px 5px 10px;
	}
	li{
		border-bottom: 1px dashed #ccc;
		position: relative;
	}
	li div{
		display: inline-block;
		position: absolute;
		top: 20px;
		line-height: 30px;
		
	}
	.price{
		color: #f00;
	}
	button{
		background-color: coral;
		border: none;
		color: white;
		padding: 5px;
		border-radius: 10px;
	}
</style>
